<template>
	<view class="regionPicker">
		<picker mode="region" @change="changeRegion">
			<view>{{ regionText }} </view>
		</picker>
	</view>
</template>

<script>
	//地区选择器
	export default {
		data() {
			return {
				regionText: '请选择地区',
				cityArray: []
			}
		},
		props: {
			city: {
				type: String
			},
		},
		created() {
			if (this.city) {
				this.regionText = this.city;
				this.cityArray = this.city.split('/');
			}
		},
		watch: {
			city(newVal) {
				if (newVal) {
					this.regionText = newVal;
					this.cityArray = newVal.split('/');
				}
			}
		},
		methods: {
			changeRegion(e) {
				const selectedRegion = e.detail.value.join('/');
				this.regionText = selectedRegion;
				this.$emit('regionSelected', selectedRegion);
			}
		}
	}
</script>

<style scoped lang="less">
	.regionPicker {
		text-align: left;
	}
</style>